<template>
  <view class="content">
    <u-navbar :placeholder='true' title="管理子公司/分行" rightText="添加" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/index')"
              @rightClick="leftClick('/pages/mine/setting/childcompany/add')">
    </u-navbar>
    <view class="main">
      <view class="search">
        <u-search :show-action="false" borderColor="#7A7DEE" bgColor="#FFFFFF" placeholder="輸入關鍵字搜索"
                  v-model="keyword" @search="search"></u-search>
      </view>
      <view class="child" v-for="(item,index) in branchlist" :key="index">
        <view class="child-item">
          <view class="table">
            <view class="name">
              母公司：
            </view>
            <view class="value">
              {{ item.parentname || item.companyname }}
            </view>
          </view>
          <view class="table">
            <view class="name">
              分行/子公司：
            </view>
            <view class="value">
              {{ item.branchname }}
            </view>
          </view>
          <view class="table">
            <view class="name">
              聯繫人：
            </view>
            <view class="value">
              {{ item.principal }}
            </view>
          </view>
          <view class="table">
            <view class="name">
              電話：
            </view>
            <view class="value">
              {{ item.phone }}
            </view>
          </view>
        </view>
        <image class="edit" @click="toedit(item)" src="@/static/images/adress_edit.png" mode=""></image>
      </view>
    </view>

  </view>
</template>

<script>
import {
  getchildcompany,
  getamount
} from '@/network/api/setting.js'
import {
  mapActions,
  mapState
} from 'vuex'

export default {
  data() {
    return {
      keyword: '',
      page: 1,
      branchlist: [],
      last_page: 0,
    }
  },
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo,
    })
  },
  onReachBottom() {
    if (this.page < this.last_page) {
      this.page++
      this.getcompanylist()
    }
  },
  onShow() {
    this.page = 1;
    this.branchlist = []
    this.getcompanylist()
  },
  // onReachBottom() {
  // 	this.page++
  // 	this.getcompanylist()
  // },
  methods: {
    toedit(item) {
      console.log(item);
      uni.navigateTo({
        url: `/pages/mine/setting/childcompany/edit?branch_id=${item.branch_id}&companyname=${item.companyname}`
      })
    },

    search() {
      this.branchlist = []
      this.getcompanylist()
    },
    async getcompanylist() {
      let data = {
        company_id: this.userinfo.company_id,
        search: this.keyword,
        sortAttr: '',
        sortMode: '',
        page: this.page
      }
      // 加载·
      uni.showLoading({
        title: '加载中'
      })
      const res = await getchildcompany(data)
      uni.hideLoading()
      const newbranchlist = res.data.branch
      this.branchlist = [...this.branchlist, ...newbranchlist]
      this.last_page = res.data.page.last_page
    },
    leftClick(url) {
      uni.navigateTo({
        url: url
      })
    },

  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100vh;
  background: #F5F6F9;

  .main {
    background-color: #fff;
    padding: 0 32rpx;

    .search {
      padding: 12rpx;
    }

    .child {
      padding: 32rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #DEDEDE;;

      .child-item {
        .table {
          display: flex;
          padding: 12rpx 0;

          .name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }

          .value {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }

      }

      .edit {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .child:last-child {
      border-bottom: none
    }
  }
}
</style>
